<!--多级型号-->
<template>
  <div>
    <div class="model">
        <a-row>
            <a-col :offset="2" v-for="(item,index) in modelData" :key="index">
                <div class="panel">
                    <div class="header flex between">
                        <div class="left flex">
                            <a-space>
                                <label>
                                    型号分类:
                                    <a-select
                                      disabled
                                      v-model="item.modelClassify.value"
                                      class="width200"
                                      :options="modelClassifyList" ></a-select>
                                </label>
                            </a-space>
                        </div>
                    </div>

                    <div class="body flex start">
                        <div class="left width100 text_right">
                            <template v-if="item.data.length>0">型号：</template>
                        </div>
                        <div class="right">
                            <a-row :gutter="10" v-if="item.data.length>0">
                                <a-radio-group v-model="item.value"  @change="radioChange">
                                        <a-radio v-for="(item2,index2) in item.data"
                                                 :value="item2.value"
                                                 :key="index2">{{item2.label}}</a-radio>
                                </a-radio-group>
                            </a-row>
                        </div>
                    </div>
                </div>
            </a-col>
        </a-row>

    </div>
  </div>
</template>

<script>
import ImageUpload from '@/components/antBase/ImageUpload'
import deepCopy from '@/utils/deepCopy'

export default {
    components:{
        ImageUpload,
    },
    props:{
        data:{
            type:Array,
            default(){
                return [];
            }
        },
        skuIds:{
            type:Array,
            default(){
                return [];
            }
        }
    },
    data(){
        return {
            modelData:[
                {
                    modelClassify:{
                        value:'',
                        label:'',
                    },
                    // isAddImg:true,
                    data:[
                        // {
                        //     label:'',
                        //     value:'',
                        // }
                    ]
                }
            ],

            // currentModelClassify:{},
            //模型数据
            modelClassifyList:[],
            // 选择完的数据
            chosenData:{
                ids:[]
            }
        }
    },
    watch: {},
    created(){
        this.getModelClassifyList();
        let tmpData=deepCopy(this.data);
        tmpData.forEach((item,index)=>{
            item.index=index;
        })
        console.log("副本数据:",tmpData)
        this.getModelDataByTableData(tmpData);
    },
    methods:{

        //获取商品全部型号分类
        async getModelClassifyList(){
            let res=await this.$get('/goods/modelnorm/list',{
                parentId:0,
                //shopId:this.shopId,   
            })
            console.log("获取型号分类:",res)
            if(res && res.returnCode=='1000'){
                res.dataInfo.forEach(item=>{
                    this.modelClassifyList.push({
                        value:item.id,
                        label:item.normName,
                    })
                });                
            }
            console.log("抽取全部型号分类:",this.modelClassifyList)
        },
        //获取型号标题和值
        async getTitleLabelAndValue(id){
            if(!parseInt(id)){
                return {};
            }
            let res = await this.$get('/goods/modelnorm/id',{
                id
            },false,true);
            if(res && res.returnCode=='1000'){
                return {
                    label:(res.dataInfo || {}).normName || '',
                    value:id,
                }
            }
            else {
                return {};
            }
        },

        async getModelClassifyLabelAndValue(modelClassifyId,modelData){
            let obj=await this.getTitleLabelAndValue(modelClassifyId);
            return {
                modelClassify:obj,
                data:modelData
            }
        },



        //获取模型数据
        async getModelData(tableData,length=1){
            let tmpData=[];
            for(let i=0;i<length;i++){
                let tmpData2 = tableData.map(item=>{
                    let modelId = item.modelIds.split(',')[i];
                    return this.getTitleLabelAndValue(modelId);
                });
                tmpData.push(Promise.all(tmpData2));
            }
            let modelData = await Promise.all(tmpData);
            console.log('modelData',modelData);
            
            //return modelData;
            //去重
            let newArr=[];
            let obj={};
            for(let i=0;i<tmpData.length;i++){
                newArr.push([]);
                let item=await tmpData[i];
                //console.log('item',item)
                for(let j=0;j<item.length;j++){
                    //console.log(i,j,obj[item[j].value]);
                    if(!obj[item[j].value]){
                        newArr[i].push(item[j]);
                        obj[item[j].value]=true;                        
                    }
                }
            }
            console.log('new modelData',newArr);

            return newArr;
        },
        //获取模型分组数据
        async getModelClassifyData(tableData){
            let modelClassifyIds=(tableData[0].superiorModelIds || '').split(',');
            let modelData=await this.getModelData(tableData,modelClassifyIds.length)
            console.log('modelData',modelData);
            console.log('modelClassifyIds',modelClassifyIds);
            let tmpData=[];
            modelClassifyIds.forEach((modelClassifyId,index)=>{ 
                const obj=this.getModelClassifyLabelAndValue(modelClassifyId,modelData[index]);
                tmpData.push(obj)
            });
            return await Promise.all(tmpData);
        },

        //第一步 通过data得到modelData
        async getModelDataByTableData(tableData=[]){
            if(tableData.length==0){//没有数据时
                this.modelData=deepCopy(modelData);
            }
            else {//有数据时得到modelData
                    if (this.skuIds.length===0){
                        console.log('没有skuids')
                        this.modelData=await this.getModelClassifyData(tableData);
                        console.log('this.modelData',this.modelData)
                        this.modelData.forEach((item)=>{
                            this.$set(item,'value',item.data[0].value)
                        })


                        for (const item of this.modelData){
                            for (const i of item.data){
                                if (item.value ===i.value){
                                    this.chosenData.ids.push({
                                        value:i.value,label:i.label,
                                        clabel:item.modelClassify.label,
                                        cvalue:item.modelClassify.value
                                    })
                                }
                            }
                        }
                    }else{
                        console.log('有skuids:',this.skuIds)
                        this.modelData=await this.getModelClassifyData(tableData);
                        // 循环遍历this.modelData
                        console.log('this.modelData',this.modelData)
                        // 有点问题好像对不上★★★★★
                        this.modelData.forEach((item,index)=>{
                                // console.log('id:',id)
                                this.$set(item,'value',this.skuIds[index])
                        })
                        //
                        for (const item of this.modelData){
                            for (const i of item.data){
                                if (item.value ===i.value){
                                    this.chosenData.ids.push({
                                        value:i.value,label:i.label,
                                        clabel:item.modelClassify.label,
                                        cvalue:item.modelClassify.value
                                    })
                                }
                            }
                        }
                    }
                console.log(this.chosenData.ids)
                //第二步
                // this.setTableDataByModelData(tableData,this.modelData);
                //第三步
                // this.setTableHeaderByModelData(this.modelData);
            }
        },
        //选择型号
        radioChange(item){
            console.log(this.modelData) // 把value 和对应的label值给抽出来
            var arr =[]
            for (const item of this.modelData){
                for (const i of item.data){
                    if (item.value ===i.value){
                        arr.push({
                            value:i.value,
                            label:i.label,
                            clabel:item.modelClassify.label,
                            cvalue:item.modelClassify.value
                        })
                    }
                }
            }
            this.chosenData.ids = arr
            console.log(this.chosenData)
            // 每个值 推进来value，查看属于父级value,如果属于同一个父级 就替换已经有的value
            // 这个for 循环
     /*       for (const i of this.modelData){
                    for (const j of i.data){
                        // 从父级里找到子级元素
                        if( j.value === item.value ){
                            console.log(j.value)
                            if (this.chosenData.classifyIds.includes(i.modelClassify.value)){
                                // 找出是哪个元素并替换它
                                console.log(i.modelClassify.value,'分类已经存在')
                                for (const x of this.chosenData.ids){
                                        if (x.cid ===i.modelClassify.value ){
                                            x.id = item.value
                                            x.label = item.label
                                    }
                                }
                            }else{
                                this.chosenData.ids.push({id:item.value,cid:i.modelClassify.value,label:item.label,clabel:i.modelClassify.label})
                                this.chosenData.classifyIds.push(i.modelClassify.value)
                            }
                            
                        }

                }
            }*/


            // this.chosenData.classifyIds = [...new Set(this.chosenData.classifyIds)]
            //  this.chosenData.ids = [...new Set( this.chosenData.ids)]
            // console.log(this.chosenData)
        },
      

    }
}
</script>

<style lang="less" scoped>
.title{
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 24px;
}
.desc{
    color:#ccc;
}
.flex{
    display:flex;
    align-items: center;    
    &.between{
        justify-content: space-between;
    }
    &.start{
        align-items: flex-start;
    }
}
/deep/ .input_text{
    width:400px!important;
    height:32px!important;
    border: 1px solid #d9d9d9!important;
    border-radius: 4px!important;
}
.width100{
    width:100px;
}
.width150{
    width:150px;
}
.width200{
    width:200px;
}
.text_right{
    text-align: right;
}
.color_red{
    color:red;
}
.upload_img{
    /deep/ .ant-upload{
        width: 70px!important;
        height: 70px!important;
        vertical-align: middle;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
            width:70px!important;
            height:70px!important;
            object-fit: cover;
        }
    }
}
.freightType{
    .ant-row{
        margin-bottom: 10px;
        &:last-child{
            margin-bottom: 0;
        }
    }
}
.product_picture{
    width:60px;
    height:60px;
    display: block;
}
.delete{
    white-space: nowrap;
}
.panel{
    border: 1px solid #E6E6E6;
    border-radius: 4px;
    margin-bottom:10px;
	.header{		
        background:#F5F5F5;
        border-bottom:1px solid #E6E6E6;
        padding:3px 15px;
		.left{
            white-space: nowrap;
		}
		.right{
			a{
				white-space: nowrap;
			}
		}
	}
}
.table_box{
    overflow: scroll;
}
</style>

